<template>
    <el-dialog title="详情" :close-on-click-modal="false" :visible.sync="visible">
        <el-form label-width="120px">
            <el-form-item label="采购类型：">{{ dataForm.applyType }} </el-form-item>
            <el-form-item label="审核状态：">{{ dataForm.verifyStatusStr }} </el-form-item>
            <el-form-item label="备注："> 
                <el-input type="textarea" resize="none" maxlength="200" :disabled="true" :autosize="{ minRows:1, maxRows: 6}" v-model="dataForm.resignationNote" />
            </el-form-item>
            </el-upload>
        </el-form>

        <el-card style="margin-top: 5px;">
            <el-steps direction="vertical" :active="this.processApprovalLogList.length">
                <el-step v-for="(log, index) in this.processApprovalLogList" :key="index" :title="log.logStyleStr"
                    :status="getStatus(log.logStyle)">

                    <template slot="description">
                        <el-card :body-style="{padding:'5px 5px 5px 20px'}">
                            <span v-if="log.createUser">操作用户：{{log.createUser}}</span><br />
                            <span  v-if="log.timestamp">操作时间：{{log.timestamp}}</span><br />
                            <span>{{log.verifyNote}}</span>
                        </el-card>
                    </template>

                </el-step>
            </el-steps>
        </el-card>
    </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                visible: false,
                dataForm: {
                    id: 0,
                    resignationNote: '',
                    verifyStatusStr: '',
                    applyType: ''
                },
                processApprovalLogList: []
            }
        },
        methods: {
            get(id) {
                // 获取申请内容详情
                this.dataForm.id = id || 0
                this.dataForm.fileName = undefined
                this.dataForm.fileUrl = undefined
                if (this.dataForm.id) {
                    this.$http({
                        url: this.$http.adornUrl('/examineapprove/my-resignation/info'),
                        method: 'post',
                        data: id
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            this.visible = true
                            this.dataForm.resignationNote = data.data.resignationNote
                            this.dataForm.verifyStatusStr = data.data.verifyStatusStr
                            this.dataForm.applyType = data.data.applyType
                        }
                    })
                }

                // 获取办理历史
                this.dataForm.id = id || 0
                if (this.dataForm.id) {
                    this.$http({
                        url: this.$http.adornUrl('/examineapprove/processApprovalLog/ProcessApprovalLogList'),
                        method: 'post',
                        data: id
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            this.visible = true
                            this.processApprovalLogList = data.dataList
                        }
                    })
                }
            },
            getStatus(style) {
                console.log(style)
                if (style === 2) {
                    return 'error'
                } else if (style === 3) {
                    return 'success'
                } else if (style === 1) {
                    return 'error'
                } else if (style === 5) {
                    return 'wait'
                }
                return 'finish'
            }
        }
    }
</script>

<style>
    .detail {
        width: 300px;
        margin: 10px 10px 15px 20px;
    }

    .el-form-item {
        font-size: 16px;
        margin-bottom: 0px;
    }

    a {
        cursor: pointer;
    }
</style>